<template>
  <view class="page">
    <Header></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-听力测试'"> </Breadcrumb>
        <view class="content" v-if="isRender">
          <view class="box">
            <view class="top">
              <view class="time">
                <text>倒计时：{{ minuteNumber }}分{{ secondNumber }}秒</text>
              </view>
              <view class="title">
                <view class="title_bg">
                  <image
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/ipad/title_bg1.png"
                    mode="widthFix"
                  ></image>
                </view>
                <view class="title_content">
                  <text class="title_text"
                    >{{ trainingName }}/{{ levelName }}/{{ chapterName }}</text
                  >
                  <text class="title_tips"
                    >听句子，选择与其内容相符的图片，并将其字母代号填在横线上。(听一遍)</text
                  >
                </view>
                <view class="title_bg">
                  <image
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/ipad/title_bg2.png"
                    mode="widthFix"
                  ></image>
                </view>
              </view>
            </view>
            <view class="bootom">
              <view class="info">
                <view class="info_content">
                  <audioPlayer2
                    v-if="audioUrl"
                    ref="audioPlayer2"
                    startPic="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/audio_play.png"
                    endPic="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/audio_suspend.png"
                    :audioId="'audio' + id"
                    :url="audioUrl"
                  ></audioPlayer2>
                </view>
              </view>
              <view class="section">
                <scroll-view scroll-y="true" class="scroll">
                  <view class="question">
                    <view
                      class="question_container"
                      v-for="(item, index) in testList"
                      :key="index"
                    >
                      <template v-if="item.typeName === '图文类型一'">
                        <view class="question_title">
                          {{ item.topicTitle }}
                        </view>
                        <view
                          class="question_content"
                          v-for="(element, i) in item.captions"
                          :key="i"
                        >
                          <view class="question_iamge">
                            <image
                              :src="element.questionPic"
                              mode="widthFix"
                            ></image>
                          </view>
                          <view class="question_top">
                            <view class="question_number">
                              <text>{{ element.question.split(".")[0] }}</text>
                            </view>
                            <view class="question_input">
                              <input
                                :value="element.choiceAnswer"
                                type="text"
                                :disabled="true"
                              />
                            </view>
                          </view>
                          <view class="question_bottom">
                            <view class="question_options">
                              <u-radio-group
                                v-model="element.choiceAnswer"
                                @change="radioGroupChange"
                              >
                                <u-radio
                                  v-for="(option, i) in element.optionsList"
                                  :key="i"
                                  :name="option.name"
                                >
                                  {{ option.name }}.{{ option.value }}
                                </u-radio>
                              </u-radio-group>
                            </view>
                            <view class="question_answer" v-if="isShowAnswer">
                              <image
                                v-if="element.isCorrect"
                                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/correct.png"
                                mode="widthFix"
                              ></image>
                              <image
                                v-else
                                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/error.png"
                                mode="widthFix"
                              ></image>
                              <text>正确答案：{{ element.answer }}</text>
                            </view>
                          </view>
                        </view>
                      </template>
                      <template v-if="item.typeName === '图文类型二'">
                        <view class="question_title">
                          {{ item.topicTitle }}
                        </view>
                        <view class="question_iamge">
                          <image :src="item.topicPic" mode="widthFix"></image>
                        </view>
                        <view
                          class="question_content"
                          v-for="(element, i) in item.captionsTwos"
                          :key="i"
                        >
                          <view class="question_top">
                            <view class="question_number">
                              <text>{{ element.question.split(".")[0] }}</text>
                            </view>
                            <view class="question_input">
                              <input
                                :value="element.choiceAnswer"
                                type="text"
                                :disabled="true"
                              />
                            </view>
                          </view>
                          <view class="question_bottom">
                            <view class="question_options">
                              <u-radio-group
                                v-model="element.choiceAnswer"
                                @change="radioGroupChange"
                              >
                                <u-radio
                                  v-for="(option, i) in element.optionsList"
                                  :key="i"
                                  :name="option.name"
                                >
                                  {{ option.name }}.{{ option.value }}
                                </u-radio>
                              </u-radio-group>
                            </view>
                            <view class="question_answer" v-if="isShowAnswer">
                              <image
                                v-if="element.isCorrect"
                                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/correct.png"
                                mode="widthFix"
                              ></image>
                              <image
                                v-else
                                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/error.png"
                                mode="widthFix"
                              ></image>
                              <text>正确答案：{{ element.answer }}</text>
                            </view>
                          </view>
                        </view>
                      </template>
                      <template v-if="item.typeName === '选择题'">
                        <view class="question_title">
                          {{ item.topicTitle }}
                        </view>
                        <view
                          class="question_content"
                          :class="{
                            select: element.question.indexOf('_') === -1,
                          }"
                          v-for="(element, i) in item.choices"
                          :key="i"
                        >
                          <view class="question_top">
                            <view class="question_number">
                              <text>{{ element.question.split(".")[0] }}</text>
                            </view>
                            <view
                              class="question_text"
                              v-if="element.question.indexOf('_') === -1"
                            >
                              <text>{{ element.question.split(".")[1] }}</text>
                            </view>
                            <view class="question_input">
                              <input
                                :value="element.choiceAnswer"
                                type="text"
                                :disabled="true"
                              />
                            </view>
                          </view>
                          <view class="question_bottom">
                            <view class="question_options">
                              <u-radio-group
                                v-model="element.choiceAnswer"
                                @change="radioGroupChange"
                              >
                                <u-radio
                                  v-for="(option, i) in element.optionsList"
                                  :key="i"
                                  :name="option.name"
                                >
                                  {{ option.name }}.{{ option.value }}
                                </u-radio>
                              </u-radio-group>
                            </view>
                            <view class="question_answer" v-if="isShowAnswer">
                              <image
                                v-if="element.isCorrect"
                                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/correct.png"
                                mode="widthFix"
                              ></image>
                              <image
                                v-else
                                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/error.png"
                                mode="widthFix"
                              ></image>
                              <text>正确答案：{{ element.answer }}</text>
                            </view>
                          </view>
                        </view>
                      </template>
                      <template v-if="item.typeName === '填空题'">
                        <view class="question_title">
                          {{ item.topicTitle }}
                        </view>
                        <view class="question_iamge fill">
                          <image :src="item.topicPic" mode="widthFix"></image>
                        </view>
                        <view
                          class="question_content fill"
                          v-for="(element, i) in item.blanks"
                          :key="i"
                        >
                          <view class="question_top">
                            <view class="question_number">
                              <text>{{ element.question.split(".")[0] }}</text>
                            </view>
                            <view class="question_input">
                              <input
                                v-model="element.choiceAnswer"
                                type="text"
                                :disabled="isShowAnswer"
                              />
                            </view>
                          </view>
                          <view class="question_bottom">
                            <view class="question_answer" v-if="isShowAnswer">
                              <image
                                v-if="element.isCorrect"
                                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/correct.png"
                                mode="widthFix"
                              ></image>
                              <image
                                v-else
                                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/error.png"
                                mode="widthFix"
                              ></image>
                              <text>正确答案：{{ element.answer }}</text>
                            </view>
                          </view>
                        </view>
                      </template>
                    </view>
                  </view>
                  <view class="button">
                    <template v-if="!isShowAnswer">
                      <view class="button_content submit" @click="submit()">
                        <text>交卷</text>
                      </view>
                    </template>
                    <template v-else>
                      <view class="button_content back" @click="handleBack()">
                        <text>返回</text>
                      </view>
                      <view class="button_content listen" @click="hearing()">
                        <text>听力全文</text>
                      </view>
                    </template>
                  </view>
                </scroll-view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="popup popup_background" v-if="isShowPopup">
      <view
        class="popup_container animate__animated animate__faster animate__fadeInDown"
        v-if="isPass"
      >
        <view class="alert">
          <view class="alert_info">
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/laugh.png"
              mode="widthFix"
            ></image>
            <view class="alert_info_content">
              <view class="alert_info_box">
                <text>得分：</text>
                <text>{{ score }}分</text>
              </view>
              <view class="alert_info_box">
                <text>用时：</text>
                <text>{{ minuteNumber }}分{{ secondNumber }}秒</text>
              </view>
              <view class="alert_info_box">
                <text>错误：</text>
                <text>{{ errorNumber }}题</text>
              </view>
              <view class="alert_info_box">
                <text>正确：</text>
                <text>{{ correctNumber }}题</text>
              </view>
            </view>
          </view>
          <view class="alert_text active" v-if="hasGold">
            恭喜您!已过关，解锁成功。奖励金币{{ goldNum }}个
          </view>
          <view class="alert_text active" v-else> 恭喜您!已过关。 </view>
          <view class="alert_button">
            <view class="alert_button_content" @click="viewAnswers()">
              查看答案
            </view>
          </view>
        </view>
      </view>
      <view
        class="popup_container animate__animated animate__faster animate__fadeInDown"
        v-else
      >
        <view class="alert">
          <view class="alert_info">
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/cry.png"
              mode="widthFix"
            ></image>
            <view class="alert_info_content">
              <view class="alert_info_box">
                <text>得分：</text>
                <text>{{ score }}分</text>
              </view>
              <view class="alert_info_box">
                <text>用时：</text>
                <text>{{ minuteNumber }}分{{ secondNumber }}秒</text>
              </view>
              <view class="alert_info_box">
                <text>错误：</text>
                <text>{{ errorNumber }}题</text>
              </view>
              <view class="alert_info_box">
                <text>正确：</text>
                <text>{{ correctNumber }}题</text>
              </view>
            </view>
          </view>
          <view class="alert_text"> 很遗憾!未通关，解锁失败。 </view>
          <view class="alert_button">
            <view class="alert_button_content" @click="viewAnswers()">
              查看答案
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-mask :show="isShowText" :zoom="false" @click="isShowText = false">
      <view class="translation">
        <view class="translation_title"> 听力全文 </view>
        <scroll-view scroll-y="true" class="popup_scroll">
          <view class="translation_content" v-html="translatedText"> </view>
        </scroll-view>
      </view>
    </u-mask>
  </view>
</template>

<script>
import { findChapterContent, listeningTestSave } from "@/api/hearing";
export default {
  beforeRouteLeave(to, from, next) {
    this.$refs.audioPlayer2.pause();
    next();
  },
  data() {
    return {
      id: "",
      testList: [],
      trainingName: "",
      levelName: "",
      chapterName: "",
      timerId: null,
      second: 0,
      minute: 0,
      secondNumber: "00",
      minuteNumber: "00",
      translatedText: "",
      audioUrl: null,
      allScore: 100,
      singleScore: 0,
      score: 0,
      correctNumber: 0,
      allSentenceNumber: 0,
      isPass: false,
      isShowAnswer: false,
      isShowPopup: false,
      isShowText: false,
      hasGold: true,
      goldNum: 0,
      isRender: false,
    };
  },
  computed: {
    errorNumber() {
      return this.allSentenceNumber - this.correctNumber;
    },
  },
  onLoad(option) {
    this.id = option.id;
    this.init();
  },
  methods: {
    init() {
      let params = {
        id: this.id,
      };
      findChapterContent(params).then((res) => {
        let chapter = res.data.chapter;
        this.trainingName = chapter.level.course.courseName;
        this.levelName = chapter.level.levelName;
        this.chapterName = chapter.chapterName;
        this.translatedText = chapter.article;
        this.testList = res.data.topics;
        this.testList.forEach((item) => {
          if (item.typeName === "图文类型一") {
            let questionList = item.captions;
            questionList.forEach((element) => {
              let optionsList = [];
              if (element.optionA) {
                optionsList.push({
                  name: "A",
                  value: element.optionA,
                });
              }
              if (element.optionB) {
                optionsList.push({
                  name: "B",
                  value: element.optionB,
                });
              }
              if (element.optionC) {
                optionsList.push({
                  name: "C",
                  value: element.optionC,
                });
              }
              this.$set(element, "optionsList", optionsList);
              this.$set(element, "choiceAnswer", "");
              this.$set(element, "isCorrect", false);
            });
            this.allSentenceNumber += questionList.length;
          }
          if (item.typeName === "图文类型二") {
            let questionList = item.captionsTwos;
            questionList.forEach((element) => {
              let optionsList = [];
              if (element.optionA) {
                optionsList.push({
                  name: "A",
                  value: element.optionA,
                });
              }
              if (element.optionB) {
                optionsList.push({
                  name: "B",
                  value: element.optionB,
                });
              }
              if (element.optionC) {
                optionsList.push({
                  name: "C",
                  value: element.optionC,
                });
              }
              if (element.optionD) {
                optionsList.push({
                  name: "D",
                  value: element.optionD,
                });
              }
              if (element.optionE) {
                optionsList.push({
                  name: "E",
                  value: element.optionE,
                });
              }
              this.$set(element, "optionsList", optionsList);
              this.$set(element, "choiceAnswer", "");
              this.$set(element, "isCorrect", false);
            });
            this.allSentenceNumber += questionList.length;
          }
          if (item.typeName === "选择题") {
            let questionList = item.choices;
            questionList.forEach((element) => {
              let optionsList = [];
              if (element.optionA) {
                optionsList.push({
                  name: "A",
                  value: element.optionA,
                });
              }
              if (element.optionB) {
                optionsList.push({
                  name: "B",
                  value: element.optionB,
                });
              }
              if (element.optionC) {
                optionsList.push({
                  name: "C",
                  value: element.optionC,
                });
              }
              if (element.optionD) {
                optionsList.push({
                  name: "D",
                  value: element.optionD,
                });
              }
              this.$set(element, "optionsList", optionsList);
              this.$set(element, "choiceAnswer", "");
              this.$set(element, "isCorrect", false);
            });
            this.allSentenceNumber += questionList.length;
          }
          if (item.typeName === "填空题") {
            let questionList = item.blanks;
            questionList.forEach((element) => {
              this.$set(element, "choiceAnswer", "");
              this.$set(element, "isCorrect", false);
            });
            this.allSentenceNumber += questionList.length;
          }
        });
        this.singleScore = this.allScore / this.allSentenceNumber;
        this.initAudio(chapter);
        this.time();
        this.isRender = true;
      });
    },
    initAudio(chapter) {
      this.audioUrl = chapter.audio;
    },
    time() {
      this.timerId = setInterval(() => {
        this.second++;
        if (this.second > 59) {
          this.second = 0;
          this.minute++;
        }
        if (this.second < 10) {
          this.secondNumber = this.second.toString().padStart(2, "0");
        } else {
          this.secondNumber = this.second.toString();
        }
        if (this.minute < 10) {
          this.minuteNumber = this.minute.toString().padStart(2, "0");
        } else {
          this.minuteNumber = this.minute.toString();
        }
      }, 1000);
    },
    submit() {
      this.$refs.audioPlayer2.pause();
      this.testList.forEach((item) => {
        let questionList = [];
        if (item.typeName === "图文类型一") {
          questionList = item.captions;
        } else if (item.typeName === "图文类型二") {
          questionList = item.captionsTwos;
        } else if (item.typeName === "选择题") {
          questionList = item.choices;
        } else if (item.typeName === "填空题") {
          questionList = item.blanks;
        }
        questionList.forEach((element) => {
          if (element.choiceAnswer === element.answer) {
            this.correctNumber++;
            element.isCorrect = true;
          }
        });
      });
      clearInterval(this.timerId);
      this.score = this.correctNumber * this.singleScore;
      this.isPass = this.score >= this.allScore ? true : false;
      if (this.isPass) {
        this.saveTest();
      }
      this.isShowPopup = true;
    },
    saveTest() {
      let params = {
        id: this.id,
      };
      listeningTestSave(params).then((res) => {
        this.hasGold = res.data.hasGold;
        this.goldNum = res.data.goldNum;
      });
    },
    viewAnswers() {
      this.isShowPopup = false;
      this.isShowAnswer = true;
      this.isShowText = true;
    },
    handleBack() {
      uni.redirectTo({
        url: "/pages/listening/listening",
      });
    },
    hearing() {
      this.isShowText = true;
    },
    radioGroupChange(e) {
      console.log(e);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./listeningDetail";
</style>
